<template>
  <div class="layout-wrapper">
    <div class="content noscroll">
      <router-view></router-view>
    </div>
    <div class="navigation-box">
      <var-bottom-navigation
        active-color="var(--system-primary-color)"
        v-model:active="activeComputed"
      >
        <var-bottom-navigation-item
          label="首页"
          icon="home"
          @click="handleRoute('/index/home')"
        />
        <var-bottom-navigation-item
          label="书签"
          icon="notebook"
          @click="handleRoute('/index/book')"
        />
        <var-bottom-navigation-item
          label="便签"
          icon="star-half-full"
          @click="handleRoute('/index/memo')"
        />
        <var-bottom-navigation-item
          label="我的"
          icon="account-circle"
          @click="handleRoute('/index/mine')"
        />
      </var-bottom-navigation>
    </div>
  </div>
</template>
<script setup name="mobileLayout">
import { ref, watch, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import hexToRgb from './util/hexToRgb.js';

const router = useRouter();
const route = useRoute();

const handleRoute = (path) => {
  router.push(path);
};

const activeComputed = computed(() => {
  const { path } = route;
  switch (path) {
    case '/index/home':
      return 0;
    case '/index/book':
      return 1;
    case '/index/memo':
      return 2;
    case '/index/mine':
      return 3;
  }
});

// 设置 mate标签移动端不允许缩放
const disableZoomForMobile = () => {
  const meta = document.createElement('meta');
  meta.setAttribute('name', 'viewport');
  meta.setAttribute(
    'content',
    'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
  );
  document.getElementsByTagName('head')[0].appendChild(meta);
};

onMounted(() => {
  // 调用函数
  disableZoomForMobile();
  document.body.classList.add('noscroll');

  const appEl = document.querySelector('.app');
  if (appEl) {
    const appStyles = getComputedStyle(appEl);
    const color = appStyles.getPropertyValue('--system-primary-color');
    if (color.length <= 7) {
      const [r, g, b] = hexToRgb(
        appStyles.getPropertyValue('--system-primary-color')
      );
      appEl.style.setProperty(
        '--system-search-color',
        `rgba(${r},${g},${b},.7)`
      );
    }
  }
});
</script>
<style scoped lang="less">
.layout-wrapper {
  .content {
    width: 100%;
    height: calc(100vh - 3rem);
    overflow-y: auto;
    background-color: #f1f1f1;
    overflow-scrolling: auto;
    -webkit-overflow-scrolling: auto; /* 禁用回弹效果 */
    /* 隐藏滚动条的样式 */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .navigation-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3rem;
  }
}
</style>
<style>
.noscroll {
  overscroll-behavior: none;
}
</style>
